'use client';

import { lora, inter, lato } from '@/components/fonts';
import LocalShipping from '@mui/icons-material/LocalShipping';
import Button from '@mui/material/Button';
import ArrowRightAlt from '@mui/icons-material/ArrowRightAlt';
import ArrowLeft from '@mui/icons-material/ArrowLeft';
import { styled } from '@mui/material/styles';
import { green } from '@mui/material/colors';
import ProductsSlider from '@/components/ProductsSlider';

const ColorButton = styled(Button)(({ theme }) => ({
  color: theme.palette.getContrastText(green['600']),
  backgroundColor: '#0687FF',
  fontWeight: 'bold',
  padding: '6px 30px',
  borderRadius: '30px',
}));

export default function screenMain({
  rtl = false,
  isFirst,
  isLast,
  title,
  subtitle,
  description,
  cover,
  asideList,
}: {
  rtl?: boolean;
  isFirst?: boolean;
  isLast?: boolean;
  title?: string;
  subtitle?: string;
  description?: string;
  cover?: string;
  asideList?: Array<{
    groupName?: string | any;
    title?: string | any;
    subtitle?: string | any;
    description?: string | any;
    [name: string]: string | any;
  }>;
}) {
  return (
    <main className={'mx-auto flex max-w-7xl flex-col px-4 md:px-8'}>
      {/*--------------------*/}
      <div
        className={`flex ${isFirst ? 'w-1/2' : 'w-full'} flex-col ${rtl ? 'rotate-x-180' : ''}`}
      >
        <div
          className={`relative top-[1px] h-14 w-1/2 self-end rounded-br-3xl border-r-[1px] border-b-[1px] border-[#e4e4e4]`}
        />
        <div
          className={
            'h-14 w-1/2 self-start rounded-tl-3xl border-t-[1px] border-l-[1px] border-[#CBD5DB]'
          }
        />
      </div>
      <section
        className={`flex flex-col gap-10 ${rtl ? 'border-r-[1px]' : 'border-l-[1px]'} border-[#CBD5DB] pb-3 lg:flex-row ${inter.className}`}
      >
        <div
          className={`relative min-h-10 flex-13/24 ${rtl ? 'order-2 pr-10 text-right' : 'order-1 pl-10'}`}
        >
          <div
            className={`text-[34px] font-semibold text-[#0687FF] uppercase ${lato.className} font-medium`}
          >
            <div
              className={`absolute ${rtl ? 'right-[0] translate-x-1/2' : 'left-[0] -translate-x-1/2'} flex h-[54px] w-[54px] items-center justify-center rounded-[50%] border-1 border-[#CBD5DB] bg-white text-gray-400`}
            >
              <LocalShipping />
            </div>
            {title}
          </div>
          <div className={`${lato.className} py-4 text-[30px] font-medium`}>
            {subtitle}
          </div>
          <p
            className={` ${lato.className} pb-12 font-sans text-[22px] text-[#50565F]`}
          >
            {description}
          </p>
          <ColorButton
            // color={'#000000'}
            startIcon={
              rtl ? (
                <ArrowRightAlt style={{ transform: 'rotate(180deg)' }} />
              ) : null
            }
            size={'medium'}
            variant="contained"
            endIcon={rtl ? null : <ArrowRightAlt />}
          >
            More
          </ColorButton>
          <div
            className={`mt-12 h-48 rounded-xl ${cover} bg-cover bg-center bg-no-repeat`}
          />
        </div>
        <div
          className={`flex min-w-0 flex-11/24 flex-col p-4 pt-[34px] lg:p-0 ${rtl ? 'order-1' : 'order-2'}`}
        >
          <ProductsSlider list={asideList} />
        </div>
      </section>
      {/*--------------------*/}
      {isLast && (
        <div
          className={`flex w-1/2 ${rtl ? 'self-end' : 'rotate-x-180'} flex-col`}
        >
          <div
            className={
              'relative top-[1px] h-14 w-1/2 self-end rounded-br-3xl border-r-[1px] border-b-[1px] border-[#e4e4e4]'
            }
          />
          <div
            className={
              'h-14 w-1/2 self-start rounded-tl-3xl border-t-[1px] border-l-[1px] border-[#CBD5DB]'
            }
          />
        </div>
      )}
    </main>
  );
}
